<script>
import {fetchList, updateInfos} from '@/api/freeback'
import {mapGetters} from 'vuex'
import router from '@/router'
import {getToken} from '@/utils/auth'

export default {
  data() {
    return {
      searchContent: '',
      page: 1,
      pageSize: 20,
      pageTotal: 0,
      userList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      userInfo: {
        username: '',
        password: '',
        code: '',
        city: '',
        bornDate: '',
        country: '',
        isEnabled: '',
        educationFk: '1',
        mail: '',
        major: '',
        majorSkill: '',
        name: '',
        nowRoles: 0,
        sexFk: '0',
        privilege: '',
        province: '',
        resumeFk: '0',
        rolesFk: '1',
        school: '',
        sessionKey: '',
        tel: '',
        userPk: '',
        userStatusFk: '1',
        workStatusFk: '1',
        headimgurl: '',
        wx: ''
      },
      formLabelWidth: '80px',
      nowRolesOptions: [
        {
          label: '招聘者',
          value: 1
        },
        {
          label: '求职者',
          value: 0
        }
      ],
      sexOptions: [],
      educationOptions: [],
      isShow: false,
      headerImgFiles: [],
      workStatusOptions: [],
      rolesOptions: [],
      userStatusOptions: []
    }
  },
  mounted() {
    this.getData()
  },
  created() {
    console.log(this.roles)
    if (!this.roles.includes('admin')) {
      router.push('/401')
      setTimeout(() => {
        router.push('/')
      })
    }
  },
  methods: {
    getToken,
    getData() {
      fetchList(this.page, this.pageSize,this.searchContent)
        .then(res => {
          console.log(res)
          const msg = res.message
          msg.list.forEach(el => {
            el.patientId = JSON.parse(el.patientId)
          })
          this.userList = msg.list
          this.pageTotal = msg.total
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
    },
    reset() {
      this.searchContent = ''
      this.page = 1
      this.pageSize = 20
      this.pageTotal = 0
      this.getData()
    },
    resetFormData() {
      this.userInfo = {
        username: '',
        password: '',
        code: '',
        city: '',
        bornDate: '',
        country: '',
        isEnabled: '',
        educationFk: '1',
        mail: '',
        major: '',
        majorSkill: '',
        name: '',
        nowRoles: 0,
        sexFk: '0',
        privilege: '',
        province: '',
        resumeFk: '0',
        rolesFk: '1',
        school: '',
        sessionKey: '',
        tel: '',
        userPk: '',
        userStatusFk: '1',
        workStatusFk: '1',
        headimgurl: '',
        wx: ''
      }
      this.headerImgFiles = []
    },
    created() {
      this.resetFormData()
      this.isShow = true
    },
    handleError(err, file, fileList) {
      console.log(err)
      this.$message({
        message: file.name + '上传失败',
        type: 'error'
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePictureCardPreviewImg(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    handleRemoveImg(file, fileList) {
      // console.log(file, fileList)
    },
    handleSuccessImg(response, file, fileList) {
      // console.log(response)
      const url = response.message
      this.userInfo.headimgurl = url
      this.headerImgFiles = [{
        name: file.name,
        url: url
      }]
    },
    submitInfo() {
      const data = {
        password: this.userInfo.password,
        userPk: this.userInfo.userPk,
        username: this.userInfo.username,
        name: this.userInfo.name,
        tel: this.userInfo.tel,
        wx: this.userInfo.wx,
        mail: this.userInfo.mail,
        province: this.userInfo.province,
        city: this.userInfo.city,
        country: this.userInfo.country,
        bornDate: this.userInfo.bornDate,
        educationFk: parseInt(this.userInfo.educationFk),
        nowroles: parseInt(this.userInfo.nowRoles),
        sexFk: parseInt(this.userInfo.sexFk),
        workStatusFk: parseInt(this.userInfo.workStatusFk),
        rolesFk: parseInt(this.userInfo.rolesFk),
        headimgurl: this.headerImgFiles[0].url,
        userStatusFk: parseInt(this.userInfo.userStatusFk)
      }
      console.log(data)
      updateInfos(data)
        .then(res => {
          console.log(res)
          if (!res.success) {
            this.$message({
              type: 'error',
              message: res.message
            })
          } else {
            this.$message({
              type: 'success',
              message: '更新成功'
            })
          }
          setTimeout(() => {
            this.isShow = false
            this.getData()
          }, 50)
        })
    },
    editInfo(row) {
      console.log(row)
      this.userInfo = {
        userPk: row.userPk,
        username: row.username,
        name: row.name,
        tel: row.tel,
        wx: row.wx,
        mail: row.mail,
        province: row.province,
        city: row.city,
        country: row.country,
        bornDate: row.bornDate,
        educationFk: `${row.educationFk == null ? '1' : row.educationFk}`,
        nowRoles: row.nowroles,
        sexFk: `${row.sexFk == null ? '1' : row.sexFk}`,
        workStatusFk: `${row.workStatusFk == null ? '1' : row.workStatusFk}`,
        rolesFk: `${row.rolesFk == null ? '1' : row.rolesFk}`,
        userStatusFk: `${row.userStatusFk == null ? '1' : row.userStatusFk}`
      }
      this.headerImgFiles = [{
        name: 'headimg',
        url: row.headimgurl
      }]
      this.isShow = true
    }
    ,
    isDisabled(row) {
      console.log(row)
      disabledUser(row.userPk, row.isEnabled === 0 ? 1 : 0)
        .then(res => {
          console.log(res)
          if (!res.success) {
            this.$message({
              type: 'error',
              message: res.message
            })
          } else {
            this.$message({
              type: 'success',
              message: row.isEnabled === 0 ? '恢复成功' : '禁用成功'
            })
            this.getData()
          }
        })
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  }
}
</script>

<template>
  <div class="app-container">
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" alt="" width="100%">
    </el-dialog>
    <el-dialog :visible.sync="isShow" title="用户信息">
      <el-form :model="userInfo">
        <el-row>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="用户账号">
              <el-input v-model="userInfo.username" autocomplete="off" placeholder="请输入用户账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="昵称">
              <el-input v-model="userInfo.name" placeholder="请输入昵称"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item :label-width="formLabelWidth" label="电话">
          <el-input v-model="userInfo.tel" autocomplete="off" placeholder="请输入电话"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="密码">
          <el-input v-model="userInfo.password" autocomplete="off" placeholder="如果设置了，将会更新新的密码"
                    type="password"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="微信">
          <el-input v-model="userInfo.wx" autocomplete="off" placeholder="请输入微信"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="电子邮箱">
          <el-input v-model="userInfo.mail" autocomplete="off" placeholder="请输入电子邮箱"/>
        </el-form-item>
        <el-row>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="所在省份">
              <el-input v-model="userInfo.province" autocomplete="off" placeholder="请输入所在省份"/>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="所在城市">
              <el-input v-model="userInfo.city" autocomplete="off" placeholder="请输入所在城市"/>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="国家">
              <el-input v-model="userInfo.country" autocomplete="off" placeholder="请输入国家"/>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="出生日期">
              <el-date-picker
                v-model="userInfo.bornDate"
                placeholder="请选择出生日期"
                type="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="学历">
              <el-select v-model="userInfo.educationFk" filterable placeholder="请选择学历">
                <el-option
                  v-for="item in educationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="当前身份">
              <el-select v-model="userInfo.nowRoles" filterable placeholder="请选择当前身份">
                <el-option
                  v-for="item in nowRolesOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="性别">
              <el-select
                v-model="userInfo.sexFk"
                filterable
                placeholder="请选择性别"
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="求职状态">
              <el-select v-model="userInfo.workStatusFk" placeholder="请选择求职状态">
                <el-option v-for="item in workStatusOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="角色">
              <el-select v-model="userInfo.rolesFk" filterable placeholder="请选择角色">
                <el-option v-for="item in rolesOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="用户状态">
              <el-select v-model="userInfo.userStatusFk" filterable placeholder="请选择用户状态">
                <el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item :label-width="formLabelWidth" label="头像">
          <el-upload
            :file-list="headerImgFiles"
            :headers="{
              token:getToken()
            }"
            :limit="1"
            :on-error="handleError"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemoveImg"
            :on-success="handleSuccessImg"
            action="/api/upload/img"
            list-type="picture-card"
          >
            <i class="el-icon-plus"/>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </div>
    </el-dialog>
    <div class="d-flex ai-center jc-end">
      <el-input
        v-model="searchContent"
        placeholder="请输入反馈内容"
        prefix-icon="el-icon-search"
        style="max-width: 220px;margin-right: 10px;"
      />
      <el-button type="primary" @click="getData">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary" @click="created">新增</el-button>
    </div>
    <el-table :data="userList" height="75vh" style="width: 100%;margin-top: 20px">
      <el-table-column type="index" width="80"/>
      <el-table-column label="反馈者姓名" prop="patientId.name" width="140"/>
      <el-table-column label="反馈内容" prop="contents" width="400"/>
      <el-table-column label="反馈时间" width="200">
        <template slot-scope="scope">
          <div>
            {{ scope.row.inputTime}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="处理状态" width="120">
        <template slot-scope="scope">
          <div>
            {{ scope.row.status }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="处理措施" prop="handlingMeasures" width="400"/>
      <el-table-column label="处理时间" prop="updateTime" width="200"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-button type="primary" @click="editInfo(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="d-flex jc-end">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        :total="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
